<style lang="scss" scoped>
  @import '@/styles/index.scss';
  .container {
    .thisblack-bgc {
      background: rgba(0,0,0,.5);
    }
    ::v-deep .el-dialog {
      .el-dialog__header {
        padding: 12px 16px;
        background: #F5F8FC;
        .head-title {
          font-size: 16px;
          color: #202933;
          font-weight: 500;
          line-height: 1.5;
          text-align: left;
        }
        .head-tip {
          font-size: 14px;
          color: #B9C0C7;
          font-weight: 400;
          line-height: 1.5;
          a{
            cursor: pointer;
            color: #0C7FF2;
          }
        }
      }
      .el-dialog__body {
        padding: 25px 40px;
        .content {
          .el-upload {
            .el-button {
              border: 1px solid #0C7FF2;
              color: #0C7FF2;
              padding: 8px 16px;
            }
          }
          .el-upload-list {
            display: none;
          }
          .crop-box {
            margin-top: 100px;
            @include flex(row, center, flex-start);
          }
          .crop-rotate {
            width: 330px;
            margin: 16px 0 30px;
            @include flex(row, center,center);
            .rotate-left {
              display: inline-block;
              vertical-align: middle;
              padding: 14px 17px;
              background: #F5F8FC;
              color: #0C7FF2;
              font-size: 14px;
              margin-right: 16px;
              font-weight: 500;
              cursor: pointer;
              i {
                margin-right: 10px;
                color: #0C7FF2;
              }
            }
            .rotate-right {
              display: inline-block;
              vertical-align: middle;
              padding: 14px 17px;
              background: #F5F8FC;
              color: #0C7FF2;
              font-size: 14px;
              font-weight: 500;
              cursor: pointer;
              i {
                margin-right: 10px;
                color: #0C7FF2;
              }
            }
          }
        }
      }
      .el-dialog__footer {
        padding: 24px 0;
        text-align: center;
        border-top: 1px solid #E5EAF0;
        .el-button {
          padding: 8px 16px;
        }
      }
    }
  }
</style>
<template>
  <div class="container">
    <el-dialog
      :visible.sync="isShowDialog"
      width="600px"
      :modal="false"
      :close-on-click-modal="false"
      class="thisblack-bgc"
    >
      <span slot="title">
        <p class="head-title">设置头像</p>
      </span>
      <div class="content">
        <el-upload
          ref="uploadPic"
          action="https://fileapi.instrument.com.cn/upflash/upimg.ashx?colname=webinar"
          :on-success="handlePicSuccess"
          :before-upload="beforePicUpload"
        >
          <el-button>选择图片</el-button>
        </el-upload>
        <div v-if="option.img" class="crop-box">
          <div style="width:330px;height:250px;margin-right: 40px;">
            <vueCropper
              ref="cropper"
              auto-crop
              center-box
              :img="option.img"
              :output-size="option.size"
              :output-type="option.outputType"
              @realTime="realTime"
            />
          </div>
          <div :style="previewStyle">
            <div :style="previews.div">
              <img :src="previews.url" :style="previews.img">
            </div>
          </div>
        </div>
        <div v-if="option.img" class="crop-rotate">
          <div class="rotate-left" @click="rotateLeft"><i class="el-icon-refresh-left" />向左旋转</div>
          <div class="rotate-right" @click="rotateRight"><i class="el-icon-refresh-right" />向右旋转</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="getChangeLogoCancel">取消</el-button>
        <el-button type="primary" @click="getChangeLogo">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
import { VueCropper } from 'vue-cropper'
import axios from 'axios'
export default {
  name: 'SuperAdmin',
  components: { VueCropper },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    boothname: {
      type: Object,
      default: ''
    }
  },
  data() {
    return {
      ruleForm: {},
      option: {
        img: '',
        size: 1,
        outputType: 'jpg',
        autoCropWidth: 85, // 默认生成截图框宽度
        autoCropHeight: 85
      },
      previewImg: '',
      previewBlob: {},
      previewStyle: {},
      previews: {}
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('closeEvents', 'isLogo', val)
      }
    }
  },
  created() {
    this.ruleForm = JSON.parse(JSON.stringify(this.boothname))
    this.option.img = this.ruleForm.headImg
  },
  methods: {
    handlePicSuccess(res) {
      console.log(res,'res');
      this.option.img = `https://img1.17img.cn/17img/${res.url}`
    },
    beforePicUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 10MB!')
      }
      return isJPG && isLt2M
    },
    realTime(data) {
      var previews = data
      var h = 0.5
      var w = 0.2

      this.previewStyle = {
        width: previews.w + 'px',
        height: previews.h + 'px',
        overflow: 'hidden',
        margin: '0',
        zoom: h
      }

      this.$refs.cropper.getCropData(img => {
        this.previewImg = img
      })
      this.$refs.cropper.getCropBlob(blob => {
        this.previewBlob = blob
      })
      this.previews = data
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft(data => {
        this.previewImg = img
      })
    },
    rotateRight() {
      this.$refs.cropper.rotateRight(data => {
        this.previewImg = img
      })
    },
    async getChangeLogo() {
      const formData = new FormData()
      var timestamp = new Date().getTime() + '.jpg'
      const newFile = new window.File([this.previewBlob], timestamp)
      formData.append('file', newFile)

      axios.post(
        `https://fileapi.instrument.com.cn/upflash/upimg.ashx?colname=webinar`, formData
      ).then(async res => {
        this.ruleForm.imlogo = `${res.data.url}`
        const obj = {
          id: this.boothname.id,
          user: this.$store.getters.username,
          userName: this.$store.getters.username,
          imListId:this.$store.getters.imListId,
          imShowId:this.$store.getters.imShowId,
          headImg: `https://img1.17img.cn/17img/${res.data.url}`,
          pathurl:this.$store.getters.imShowId.substring(0,2).toLowerCase()=="tw"?'twBoss':'PtBoss'
        }
        const { data } = await api.boss.updateAccountInfo(obj)
        this.$emit('closeEvents', true)
        this.$message({ message: '设置成功', type: 'success' })
      })
    },
    getChangeLogoCancel() {
      this.$emit('closeEvents', false)
    }
  }
}
</script>
